<template>
    <div class="notice-page">
        <div class="card title-card">
            <div class="title-section">
                <el-icon class="title-icon">
                    <Document />
                </el-icon>
                <div class="title-text">
                    <h1 class="page-title">预约须知</h1>
                    <p class="page-subtitle">编辑预约信息</p>
                </div>
            </div>
        </div>
        <div class="card content-card">
            <div class="card-header">
                <h3 class="card-title">
                    <el-icon>
                        <Edit />
                    </el-icon>
                    编辑预约须知
                </h3>
            </div>
            <div style="border: 1px solid #ccc">
                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                    :mode="mode" />
                <Editor style="height: 500px; overflow-y: hidden;" v-model="appointmentNoticeDesc"
                    :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
            </div>
            <div class="content-actions">
                <el-button type="primary" @click="saveNotice">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Document, Edit } from '@element-plus/icons-vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '../../../node_modules/@wangeditor/editor-for-vue'
import { ElMessage } from 'element-plus'
import { axiosrmedical } from '@/http/axiosRead'
import { axioswmedical } from '@/http/axiosWrtie'

const appointmentNoticeDesc = ref('')

const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const mode = ref()

const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

// 查询预约须知数据
const getAppointmentNotice = async () => {
    try {
        const response = await axiosrmedical.get('/Register/AppointmentNoticeGet')
        console.log('查询预约须知响应:', response.data)

        if (response.data.code === 200 && response.data.data) {
            // 将查询到的数据反填到编辑器中
            appointmentNoticeDesc.value = response.data.data.appointmentNoticeDesc || ''
            ElMessage.success('预约须知数据加载成功')
        } else {
            ElMessage.warning('暂无预约须知数据')
        }
    } catch (error) {
        console.error('查询预约须知失败:', error)
        ElMessage.error('查询预约须知失败')
    }
}

const saveNotice = async () => {
    try {
        const response = await axioswmedical.post('/Register/AddAppointmentNotice', {
            appointmentNoticeDesc: appointmentNoticeDesc.value
        })

        console.log('保存预约须知响应:', response.data)

        if (response.data.code === 200) {
            ElMessage.success(response.data.msg || '保存成功')
            // 保存成功后刷新查询数据
            await getAppointmentNotice()
        } else {
            ElMessage.error(response.data.msg || '保存失败')
        }
    } catch (error) {
        console.error('保存预约须知失败:', error)
        ElMessage.error('保存预约须知失败')
    }
}

// 组件挂载时自动查询数据
onMounted(() => {
    getAppointmentNotice()
})
</script>

<style scoped>
.card,
:deep(.el-form),
:deep(.el-dialog) {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.08);
}

.title-card {
    margin-bottom: 18px;
}

.title-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.title-icon {
    font-size: 2.2rem;
    color: #2563eb;
    background: #f0f6ff;
    border-radius: 12px;
    padding: 8px;
}

.page-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #222;
}

.page-subtitle {
    color: #888;
    font-size: 1rem;
}

.content-card {
    margin-top: 0;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #2563eb;
}

.notice-quill {
    margin-bottom: 16px;
    border-radius: 12px;
    background: #fff;
}

.content-actions {
    text-align: right;
}
</style>
